<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>vue的监听器</h1>
<div id="app">
    <input type="text" v-model="content">
    <div>{{showcontent}}</div>
    <button @click="obj.name='小红'">改变name属性</button>
    <button @click="changeCar">改变car属性</button>
</div>

<!--使用CDN方式引入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            content: "",
            obj: {
                age: 12,
                name: "小明",
                car: {
                    brand: 'BMW',
                    price: 20000
                }
            },
            num: 0
        },
        computed: {
            showcontent: function () {
                return "输入的内容是" + this.content;
            }
        },
        watch: { //监听input框的变化情况
            //在input框每次输入内容的时候,这一行在后台都会打印值:改变后的数据---改变前的数据
            'content': { //定义在watch里的conten代表监控数据content
                handler: function (newVal, oldVal) { //操作者
                    console.log(newVal, "---", oldVal)
                },
            },
            //监听对象中name属性
            'obj.name': {
                //刚刚进入页面时 数据没有改变,默认undefined,后台打印 小明 # undefined
                //当点击改变数据的时候,后台打印  小红 # 小明
                handler: function (newVal, oldVal) {
                    console.log(newVal, '#', oldVal)
                },
                deep: false, //深度监听，可以监听这个对象的某个属性比如说监听 'obj.name'
                immediate: true, //监听的数据第一次被绑定的时候就开始监听
            },

            'obj.car': {
                handler: function (newVal, oldVal) {
                    console.log("旧品牌：" + oldVal.brand)
                    console.log("新品牌：" + newVal.brand)
                },
                deep: true, //深度监听，可以监听这个对象的某个属性比如说监听 'obj.name'
                immediate: false, //监听的数据第一次被绑定的时候就开始监听
            }
        },
        methods: {
            changeCar() {
                this.obj.car.brand = 'TOYOTA';
                /*
                this.obj.car = {
                    brand: 'TOYOTA',
                    price: 12000
                }*/
            }
        }
    })
</script>
</body>
</html>
